<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2024-02-23 09:02:36
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-02-23 11:36:00
 * @FilePath: /hr_new_vue3/src/views/Management/Administration/EnterpriseAnnouncement/AddAnnouncement/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 新增/编辑公告 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew :title="title" showBack></pageHeaderNew>
    </template>
    <a-form :model="formData.data" auto-label-width :rules="rules" class="form">
      <a-form-item field="name" label="公告标题" show-colon>
        <a-input
          v-model="formData.data.name"
          placeholder="请输入"
          style="width: 400px"
        />
      </a-form-item>
      <a-form-item field="text" label="公告内容" show-colon>
        <RichTextNew v-model:content="formData.data.text"></RichTextNew>
      </a-form-item>
      <a-form-item field="files" label="公告附件" show-colon>
        <UploadFile
          class="file"
          ref="uploadRef"
          v-model:fileList="fileList"
          :draggable="false"
          tip="支持pdf、word、ppt、jpg，zip等格式，文件大小不超过50M"
          :fileTypeList="fileTypeList"
          :userId="userId"
          :type="8"
          @uploadOk="uploadOk"
          :showRemoveButton="false"
          :showPreviewButton="false"
          :imgSelected="bgImgUrl"
          @setBgImg="selectImg"
          :hiddenMask="true"
        />
      </a-form-item>
      <a-form-item field="signature" label="公告署名" show-colon>
        <a-input
          v-model="formData.data.signature"
          placeholder="如人事部"
          style="width: 400px"
        />
      </a-form-item>
      <a-form-item field="type" label="公告类别" show-colon>
        <a-select
          style="width: 400px"
          placeholder="请选择"
          v-model="formData.data.type"
        >
          <a-option>Beijing</a-option>
          <a-option>Shanghai</a-option>
          <a-option>Guangzhou</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="range" label="发布范围" show-colon>
        <a-select
          v-model="formData.data.participant"
          multiple
          :popup-visible="false"
          @popup-visible-change="(val, type) => onParticipatorChange(val, 1)"
          :max-tag-count="3"
          @remove="(item, type) => remove(item, 1)"
          value-key="uid"
        >
          <a-option v-for="item in participant" :key="item.uid" :value="item">
            {{ item.name }}
          </a-option>
        </a-select>
      </a-form-item>
    </a-form>
    <footer>
      <a-space>
        <a-button class="btn" type="secondary" @click="router.back()">
          取消
        </a-button>
        <a-button class="btn" type="primary"> 保存草稿 </a-button>
        <a-button class="btn" type="primary"> 现在发布 </a-button>
      </a-space>
    </footer>
  </ContentCard>
  <HumanOrDepartmentModal
    v-model:visible="humanOrDepartmentModalVisible"
    @humanOrDepartmentEmit="humanOrDepartmentEmit"
    :data="formData.data.range"
  />
</template>

<script lang="ts" setup>
const router = useRouter();
const userId = +localStorage.getItem('userId');
const uploadRef = ref();
const fileList = ref<any[]>([]);
const fileTypeList = [
  '.png',
  '.jpeg',
  '.jpg',
  '.pdf',
  '.doc',
  '.docx',
  '.ppt',
  '.pptx',
  '.zip'
];
const title = '新增公告';

const rules = {
  name: {
    required: true,
    message: '请输入公告标题'
  },
  text: {
    required: true,
    message: '请输入公告内容'
  },
  signature: {
    required: true,
    message: '请输入公告署名'
  },
  type: {
    required: true,
    message: '请输入公告类别'
  },
  range: {
    required: true,
    message: '请输入发布范围'
  }
};

let formData = reactive({
  data: {
    name: '', // 公告标题
    text: '', // 公告内容
    files: '', // 公告附件
    signature: '', // 公告署名
    type: '', // 公告类别
    range: '' // 发布范围
  }
});
let humanOrDepartmentModalVisible = ref(false); // 人员或部门弹窗

const humanOrDepartmentEmit = (data: any) => {
  // if (currType === 1) {
  //   participant.value = data;
  //   formData.data.participant = data;
  //   console.log(
  //     '=================currHumanOrDepartmentModalDatacurrHumanOrDepartmentModalData==================='
  //   );
  //   console.log(data);
  //   console.log('====================================');
  // } else {
  //   range.value = data;
  //   rangeIds.value = data.map((item: any) => item.id);
  //   formData.data.range = data;
  // }
};
</script>

<style lang="less" scoped>
.form {
  width: 80%;
  margin: 0 auto;
}
footer {
  height: 60px;
  width: calc(100% - 100px);
  background-color: #fff;
  box-shadow: 1px -1px 10px 0 #cacaca;
  position: fixed;
  bottom: 0;
  left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    width: 120px;
    height: 40px;
    border-radius: 5px;
  }
}
</style>
